<template>
  <view class="interview">

      <!-- 只能有一个根元素 -->
      <view class="sticky">
        <u-tabs
          ref="tabs"
          :list="list"
          active-color="#8486f8"
          inactive-color="#606266"
          font-size="30"
          @change="sectionChange"
          :current="current"
        ></u-tabs>
        <!-- <u-subsection :list="list" :current="current" active-color="#8486f8" ></u-subsection> -->
      </view>

    <view class="item">
      <u-row gutter="16" v-if="lists.length">
        <u-col
          span="6"
          v-for="(v, i) in lists"
          :key="i"
          @click="previewImage(v)"
        >
          <view
            class="demo-layout"
            :style="{ backgroundImage: 'url(' + v.cover + ')' }"
          >
          </view>
        </u-col>
      </u-row>
      <view class="no-data" v-else>
        <image src="/static/inbetweening/no-data.png" mode="widthFix"></image>
        <view class="title"> 暂无内容 </view>
      </view>
    </view>

    <view class="no-more" v-if="lists.length">
      <u-loadmore :status="status" font-size="24" :load-text="loadText" />
    </view>
    <ALoading v-show="aloading"></ALoading>
  </view>
</template>

<script>
import ALoading from "../../../components/loading/loading.vue"
export default {
  components: { ALoading },
  data() {
    return {
      loadText: {
        nomore: "我也是有底线的",
      },
      aloading: true,
      list: [],
      lists: [],
      id: 1,
      current: 0,
      lists: [
        {
          id: 1,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/2e53e023a7bfc690.webp",
        },
        {
          id: 2,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/f704db1f41365ad0.webp",
        },
        {
          id: 3,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/2b34bf57d38911c3.jpg",
        },
        {
          id: 4,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/e000e9fea2a7c917.jpg",
        },
        {
          id: 5,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/8ae16cb360a04687.jpg",
        },
        {
          id: 6,
          imageUrl: "https://s3.bmp.ovh/imgs/2022/01/906572b0b20c95e4.webp",
        },
      ],
    }
  },
  onShow() {
    this.getWallpaperCateList()
    this.getWallpaperCateItem()
  },
  methods: {
    sectionChange(index) {
      let res = this.list.filter(function (v, i) {
        return index == i
      })
      this.current = index
      this.id = res[0].id
      this.getWallpaperCateItem(res[0].id)
    },
    getWallpaperCateItem(id) {
      let data = {
        status: 1,
        id: this.id,
      }
      this.$store.dispatch("wallpaper/cateItem", data).then(res => {
        this.lists = res
        this.aloading = false
      })
    },
    previewImage(v) {
      uni.navigateTo({
        url: "/pages/pxc/wallpaper/detail/detail?image=" + v.cover,
      })
    },
    getWallpaperCateList() {
      let data = {
        status: 1,
      }
      this.$store.dispatch("wallpaper/cateList", data).then(res => {
        this.list = res.data
        this.aloading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.demo-layout {
  height: 700rpx;
  border-radius: 8rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: 20upx;
}
.sticky{
  position: sticky;
  top: 0;
  left: 0;
}
.item{
  margin-top: 20upx ;
}
</style>
